<template>
    <div>
        <el-card>
            <el-table row-key="id" :data="tableData" border stripe>
                <el-table-column label="名称" prop="name">
                </el-table-column>
                <el-table-column label="权限值" prop="code">
                </el-table-column>
                <el-table-column label="修改时间" prop="updateTime">
                </el-table-column>
                <el-table-column label="操作">
                    <template #="{ row, $index }">
                        <el-button :disabled="row.level == 4 ? true : false" size="small"
                            :title="row.level == 3 ? '添加功能' : '添加菜单'" type="warning" @click="add(row)"
                            icon="plus"></el-button>
                        <el-button :disabled="row.level == 1 ? true : false" size="small" title="编辑菜单" type="primary"
                            @click="edit(row)" icon="edit"></el-button>
                        <el-popconfirm :title="`你确定删除菜单${row.name}吗？`" @confirm="deleteMenu1(row.id)" width="260px">
                            <template #reference>
                                <el-button :disabled="row.level == 1 ? true : false" size="small" title="删除菜单(气泡确认)"
                                    type="danger" icon="delete"></el-button>
                            </template>
                        </el-popconfirm>
                        <el-button :disabled="row.level == 1 ? true : false" size="small" title="删除菜单(提示框确认)" type="danger"
                            @click="deleteMenu(row)" icon="delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog :title="menuParams.id ? '修改菜单' : '添加菜单'" v-model="dialogvisible" width="36%">
                <el-form label-width="80px">
                    <el-form-item label="名称">
                        <el-input placeholder="请输入名称" v-model="menuParams.name"></el-input>
                    </el-form-item>
                    <el-form-item label="权限值">
                        <el-input placeholder="请输入权限值" v-model="menuParams.code"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="dialogvisible = false">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </template>
            </el-dialog>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import type { PermisstionList, Permisstion, PermisstionResponseData, MenuParams } from '@/api/acl/menu/type'
import { reqAllPermisstion, reqAddOrUpdateMenu, reqRemoveMenu } from '@/api/acl/menu'
import { ElMessage, ElMessageBox } from 'element-plus';

let tableData = ref<PermisstionList>([])
let dialogvisible = ref<boolean>(false)
let menuParams = reactive<MenuParams>({
    "code": '',//权限数值
    "level": 0,//几级菜单
    "name": '',//菜单的名字
    "pid": 0,//菜单的ID
})

onMounted(() => {
    load()
})

const load = async () => {
    let res: PermisstionResponseData = await reqAllPermisstion()
    if (res.code == 200) {
        tableData.value = res.data
    }
}
const add = (row: Permisstion) => {
    Object.assign(menuParams, {
        "code": '',//权限数值
        "level": 0,//几级菜单
        "name": '',//菜单的名字
        "pid": 0,//菜单的ID
        id: undefined
    })
    dialogvisible.value = true
    menuParams.level = row.level + 1
    menuParams.pid = (row.id as number)
}
const save = async () => {
    let res: any = await reqAddOrUpdateMenu(menuParams)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: menuParams.id ? '修改成功' : '添加成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: menuParams.id ? '修改失败' : '添加失败'
        })
    }
    load()
    dialogvisible.value = false
}
const edit = (row: Permisstion) => {
    dialogvisible.value = true
    Object.assign(menuParams, row)
}
const deleteMenu1 = async (id: number) => {
    let result = await reqRemoveMenu(id)
    if (result.code == 200) {
        //删除成功提示信息
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        //再次获取已有的数据
        load()
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
const deleteMenu = (row: Permisstion) => {
    ElMessageBox.confirm(
        `你确定要删除菜单${row.name}吗?`,
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await reqRemoveMenu((row.id as number))
            if (result.code == 200) {
                //删除成功提示信息
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
                //再次获取已有的数据
                load()
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败'
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
</script>

<style scoped></style>